<template>
  <div class="obj-box">
    <div class="obj" @contextmenu.prevent="onContextmenu">
      <!-- <p>加载fbx</p> -->
      <div id="obj-mycnavas" class="obj-mycnavas" ref="threeTarget"></div>
      <div class="changeBox">
        <div v-for="item in modelList" :key="item.id">
          <input type="button" :value="item.modelName" />
        </div>
      </div>
      <div class="title-box" v-if="show">
        <div class="children">position:{{ cameraPosition.position }}</div>
        <div class="children">rotation:{{ cameraPosition.rotation }}</div>
      </div>
    </div>
  </div>
</template>

<script>
// import './LoadGltd.less'
import { PMREMGenerator, Color, LoadingManager } from 'three'
import { TEngine } from '@/components/Three/JS/Eengie.js'
import { LightsList } from '@/components/Three/JS/Light.js'
import { HelperList } from '@/components/Three/JS/Helper.js'
import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader'

var TE
export default {
  data() {
    return {
      modelList: [{ modelName: '咖啡杯', model: 'coffeemat' }],
      show: false,
      cameraPosition: { position: {}, rotation: {} },
      removeModel: ''
    }
  },
  mounted() {
    this.Main()
    window.addEventListener('click', () => {
      // e.preventDefault()
      document.getElementById('obj-mycnavas').onmousedown = (e) => {
        if (e.button == 2) {
          this.show && (this.show = true)
          console.log('你点了右键')
          // alert('你点了右键')
        } else if (e.button == 0) {
          this.show = false
          console.log('你点了左键')
          // alert('你点了左键')
        } else if (e.button == 1) {
          this.show = false
          console.log('你点了滚轮')
          // alert('你点了滚轮')
        }
      }
    })
  },
  methods: {
    Main() {
      console.log(1111111111111)
      const threeTarget = this.$refs.threeTarget
      TE = new TEngine(threeTarget)
      console.log(LightsList)
      TE.scene.add(...LightsList)
      TE.scene.add(...HelperList)

      const environment = new RoomEnvironment()
      const pmremGenerator = new PMREMGenerator(TE.renderer)
      TE.scene.background = new Color(0xbbbbbb)
      TE.scene.environment = pmremGenerator.fromScene(environment).texture
      console.log(TE, 'myTE')
      this.AddObjModel()
    },
    //加载obj模型得方法
    AddObjModel() {
      const manager = new LoadingManager()

      manager.onProgress = function (item, loaded, total) {
        console.log(item, loaded, total)
      }

      const mtlLoader = new MTLLoader()
      const objloader = new OBJLoader()
      const farmePromise = new Promise((resolve, reject) => {
        mtlLoader
          .loadAsync('/Obj/newfarme.mtl')
          .then((materialCreator) => {
            objloader
              .setMaterials(materialCreator)
              .loadAsync('/Obj/newfarme.obj')
              .then((group) => {
                resolve(group)
              })
              .catch((err) => {
                reject(err)
              })
          })
          .catch((err) => {
            reject(err)
          })
      })
      farmePromise.then((obj) => {
        TE.scene.add(obj)
      })
    },
    //  右击菜单
    onContextmenu(event) {
      this.$contextmenu({
        items: [
          {
            label: '获取相机点位',
            onClick: () => {
              this.message = '返回(B)'
              this.show = true
              this.ShowCameraPosition()
            }
          },

          {
            label: '移动模型',
            divided: true,
            minWidth: 0,
            onClick: () => {
              this.show = false
            }
            // children: [{ label: '翻译成简体中文' }, { label: '翻译成繁体中文' }]
          },
          {
            label: '删除模型',
            minWidth: 0,
            onClick: () => {
              this.message = '截取可视化区域'
              console.log(TE.exportModel)
              TE.exportModel && TE.exportModel.removeFromParent()
              console.log('截取可视化区域')
            }
          }
        ],
        event, // 鼠标事件信息
        customClass: 'custom-class', // 自定义菜单 class
        zIndex: 3, // 菜单样式 z-index
        minWidth: 230 // 主菜单最小宽度
      })
      return false
    },
    //获取相机位置
    ShowCameraPosition() {
      this.cameraPosition.position = {}
      this.cameraPosition.rotation = {}
      this.cameraPosition.position.x = TE.camera.position.x.toFixed(6)
      this.cameraPosition.position.y = TE.camera.position.y.toFixed(6)
      this.cameraPosition.position.z = TE.camera.position.z.toFixed(6)
      this.cameraPosition.rotation.x = TE.camera.rotation.x.toFixed(6)
      this.cameraPosition.rotation.y = TE.camera.rotation.y.toFixed(6)
      this.cameraPosition.rotation.z = TE.camera.rotation.z.toFixed(6)
      console.log(TE.camera)
    }
  }
}
</script>
<style lang="less" scoped></style>
